.header {
  display flex
  align-items center
  justify-content space-between
  box-sizing border-box
  width 100%
  height 100%
  padding 0 20rem
  background var(--background-color)

  .header-left {
    display flex
    justify-content flex-start
    height 100%

    .brand {
      display flex
      align-items center
      justify-content flex-start
      height 100%
      cursor pointer

      .logo {
        width 46rem
        height 46rem
        margin-right 10rem

        img {
          width 100%
        }
      }


      .title {
        font-weight bold
        font-size 36rem
      }
    }


    .website-count {
      display flex
      align-items flex-end
      box-sizing border-box
      margin-left 10rem
      padding-bottom 12rem
      font-size 14rem
      cursor pointer

      +picx-mobile() {
        display none
      }
    }
  }


  .header-right {
    .user-info {
      display flex
      align-items center
      cursor pointer

      .username {
        font-size 16rem
      }

      .avatar {
        display flex
        align-items center
        justify-content center
        box-sizing border-box
        width 38rem
        height 38rem
        margin-left 10rem
        padding 1rem
        color var(--text-color)
        border 1rem solid var(--text-color)
        border-radius 50%

        img {
          width 100%
          height 100%
          border-radius 50%
        }
      }
    }
  }
}
